<template>
  <section class="free-video-body">
    <!--西瓜视频播放器容器-->
    <div id="videoContent"></div>
  </section>
</template>

<script setup>

import XGPlayer from 'xgplayer';
import {MINIO_HOST} from "@/constant";
import {watch} from "vue";

/* ==================== data ==================== */

// data: 西瓜视频播放器实例
let xgPlayer;

/* ==================== props ==================== */

// props: 接收父组件传递过来的值
let props = defineProps({
  firstEpisodeUrl: {type: String, default: 'default-episode.mp4'}
});

/* ==================== watch ==================== */

// watch: 监听父组件传递过来的值，监听对象需要设置为一个函数返回值
watch(() => props.firstEpisodeUrl, (newValue, oldValue) => {
  // 当 `props.firstEpisodeUrl` 变化后，初始化西瓜视频播放器
  initXGPlayer(newValue);
});

// 初始化西瓜视频播放器
function initXGPlayer(episodeUrl) {
  xgPlayer = new XGPlayer({
    id: "videoContent", // 绑定视频容器
    url: MINIO_HOST + '/episode/' + episodeUrl, // 视频对象
    poster: require('@/assets/free-video-cover.png'), // 视频封面
    fluid: true, // 使用流体布局
    playbackRate: [0.5, 1, 1.5, 2], // 倍速播放设置
    download: false, // 不允许下载视频
    pip: false, // 不开启画中画
  });
}

// 测试用
setTimeout(() => {
  initXGPlayer('a.mp4');
}, 1000);


</script>

<style scoped>

</style>